<%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + request.getContextPath() + "/";
    request.setAttribute("basePath", basePath);
%>
<html>
<head>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="${basePath}css/font.css">
    <link rel="stylesheet" href="${basePath}css/xadmin.css">
    <link rel="stylesheet" href="${basePath}lib/layui/css/layui.css">
    <script type="text/javascript" src="${basePath}js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="${basePath}lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="${basePath}js/xadmin.js"></script>
    <style>
        form {
            width: 90%;
            margin: 0 auto;
        }

        /*.reset-radio {*/
        /*display:block;*/
        /*position: relative;*/
        /*width: 16px;*/
        /*height: 16px;*/
        /*margin-top: 16px;*/

        /*}*/

        /*.reset-radio .real-target {*/
        /*z-index: 1;*/
        /*width: 100%;*/
        /*height: 100%;*/
        /*position: absolute;*/
        /*display: inline-block;*/
        /*background: #ffffff;*/
        /*border: 1px solid #dadde0;*/
        /*border-radius: 100%;*/
        /*top: 0;*/
        /*left: 0;*/
        /*bottom: 0;*/
        /*}*/

        /*.reset-radio input[type=radio] {*/
        /*cursor: pointer;*/
        /*z-index: 2;*/
        /*width: 16px;*/
        /*height: 16px;*/
        /*opacity: 0;*/
        /*position: absolute;*/
        /*left: 0;*/
        /*top: 0;*/
        /*margin: 0;*/
        /*right: 0;*/
        /*bottom: 0;*/
        /*}*/

        /*.reset-radio input:checked + span {*/
        /*border-color: #48b4ec;*/
        /*}*/

        /*.reset-radio input:checked + span::before {*/
        /*content: '';*/
        /*position: absolute;*/
        /*background: #48b4ec;*/
        /*width: 6px;*/
        /*height: 6px;*/
        /*top: 50%;*/
        /*left: 50%;*/
        /*transform: translate(-50%, -50%);*/
        /*border-radius: 100%;*/
        /*}*/

        .mar-top-1 {
            margin-top: 14px;
        }

        .max-wid-500 {
            max-width: 500px;
        }

        .pad-container {
            box-sizing: border-box;
            padding: 20px;
        }

        .flex {
            display: flex;
            align-items: center;
        }

        .flex input {
            margin-left: 16px;
            display: block;
        }

        .flex textarea {
            margin-left: 16px;
        }

        div.radio-box {
            position: relative;
            line-height: 30px;
        }

        div.radio-box span {
            margin-left: 20px;
        }

        input[type="radio"] {
            width: 20px;
            height: 20px;
            opacity: 0;
        }

        label {
            position: absolute;
            left: 5px;
            top: 3px;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 1px solid #999;
            　　　　　　　cursor: pointer;
        }

        /*设置选中的input的样式*/
        /* + 是兄弟选择器,获取选中后的label元素*/
        input:checked + label {
            background-color: #fe6d32;
            border: 1px solid #fe6d32;
        }

        /*添加的加号与label进行拼接(一个矩形边框去掉上和左的边框),再旋转45度*/
        input:checked + label::after {
            position: absolute;
            content: "";
            width: 5px;
            height: 10px;
            top: 3px;
            left: 6px;
            border: 2px solid #fff;
            border-top: none;
            border-left: none;
            transform: rotate(45deg);
        }

    </style>
</head>
<body class="pad-container">
<form action="/course/work/comment">
    <input type="hidden" value="${memberWork.id}" name="id"/>
    <c:forEach items="${memberWork.courseForms}" var="item">
        <%--<br/>--%>
        <div class="mar-top-1">
            <c:if test="${item.type ne 'file'}">
                <p>${item.name}</p>
            </c:if>
            <c:choose>
                <c:when test="${item.type eq 'text'}">
                    <input class="max-wid-500 " disabled="disabled" type="text" value="${item.value}"/>
                </c:when>
                <c:when test="${item.type eq 'textarea' and item.name ne '老师点评'}">
                    <textarea class="layui-textarea max-wid-500" disabled="disabled">${item.value}</textarea>
                </c:when>
                <c:when test="${item.type eq 'file'}">
                    <img disabled="disabled" class="max-wid-500" src="${WF_CONSOLE_CONFIG_OSS_URL}${item.value}">
                </c:when>
                <c:when test="${item.type eq 'select'}">
                    <select disabled="disabled" class="max-wid-500">
                        <c:forEach items="${item.option}" var="option">
                            <option <c:if test="${item.value eq option}">selected="selected"</c:if>>${option}</option>
                            <c:if test="${item.answer eq option}"><img src="${basePath}images/right.png" height="20px;"
                                                                       width="20px;"/></c:if>
                        </c:forEach>
                    </select>
                </c:when>
                <c:when test="${item.type eq 'radio'}">
                    <c:forEach items="${item.option}" var="option">
                        <div class="radio-box">
                            <input class="max-wid-500 as-radio" id="${item.id}"
                                   <c:if test="${item.value eq option}">checked="checked"</c:if>
                                   disabled="disabled"
                                   type="radio"/>
                            <label for="${item.id}"></label>
                            <span>${option}</span>
                            <c:if test="${item.answer eq option}"><img src="${basePath}images/right.png" height="20px;"
                                                                       width="20px;"/></c:if>
                        </div>
                    </c:forEach>
                </c:when>
                <c:when test="${item.type eq 'checkbox'}">
                    <c:forEach items="${item.option}" var="option">
                        <input class="max-wid-500 checkbox"
                               <c:if test="${item.value eq option}">checked="checked"</c:if> disabled="disabled"
                               type="checkbox" value="${option}"/>
                        <c:if test="${item.answer eq option}"><img src="${basePath}images/right.png" height="20px;"
                                                                   width="20px;"/></c:if>
                    </c:forEach>
                </c:when>
                <c:when test="${item.name eq '老师点评'}">
                    <textarea class="layui-textarea max-wid-500" name="data">${item.value}</textarea><br/>
                </c:when>
            </c:choose>
        </div>
        <br/>
    </c:forEach>
    <input type="submit" value="提交"/>
</form>
</body>
</html>